<template>
  <div>
    <van-popup 
      v-model="rechargeSearchShow" 
      position="top"
      :close-on-click-overlay="false"
      @click-overlay="rechargeSearchClose">
      <div class="content">
        <ul class="list_box">
          <li 
            v-for="(item, index) in list" 
            :key="index"
            class="list_item"
            :class="[currentIndex === index ? 'list_item_active' : '']"
            @click="itemClick(index)">
            {{item}}
          </li>
        </ul>
        <div class="search_input">
          <van-field 
            v-model="value" 
            :clearable="true"
            class="input"/>
          <span class="search_text" @click="searchName">搜索</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  export default {
    props: {
      rechargeSearchShow: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        list: ['App账号', '游戏名称', '渠道ID'],
        currentIndex: 0,
        value: '',
      }
    },
    methods: {
      rechargeSearchClose() {
        this.$emit('recharge-search-close')
        this.value = ''
      },
      itemClick(index) {
        this.currentIndex = index
      },
      searchName() {
        if(this.currentIndex === 1) {
          this.$emit('search-game',this.value)
        }else {
          this.$emit('search-user',this.value)
        }
        this.value = ''
      }
    },
  }
</script>

<style scoped>
.content {
  width: 670px;
  height: 280px;
  padding: 0 40px;
  background: #fff;
  margin-left: 50%;
  transform: translateX(-50%);
}

.list_box {
  display: flex;
  font-size: 30px;
  padding-top: 88px;
  color: #333;
}

.list_item {
  margin-right: 100px;
}

.list_item_active {
  position: relative;
  color: #374aee;
}

.list_item_active::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 15px;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: url('../../../assets/img/page/ic_search_san.png') no-repeat;
  background-size: 100%;
}

.search_input {
  margin-top: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input {
  padding: 0;
  line-height: 64px;
  font-size: 30px;
  padding-left: 20px;
  padding-right: 20px;
  width: 596px;
  height: 64px;
  border: 1px solid #374aee;
  border-radius: 10px;
}

.search_text {
  font-size: 26px;
  color: #333;
}
</style>